<template>
<!-- 资源配置 -->
  <div class="resource-root">
    <div class="param" v-if="'exec_jar'===state.data.moduleType">
      <span class="paramKey">参数(java运行时需要的参数)：</span>
      <a-textarea
        spellcheck="false"
        style="display: inline-block; width: 880px; word-break: break-all"
        v-model:value="state.data.javaArgs"
         :rows="8"
      />
    </div>
    <div class="param">
      <span class="paramKey">内存最小值（单位为M）: {{ state.data.minMem }}M</span>
      <a-slider class="sliderLine"  v-model:value="state.data.minMem" :min="256" :max="8192" :step="256"/>
    </div>
    <div class="param">
      <span value class="paramKey">内存最大值（单位为M）: {{ state.data.maxMem }}M</span>
      <a-slider class="sliderLine" v-model:value="state.data.maxMem" :min="256" :max="8192" :step="256"/>
    </div>
    <div class="param">
      <span value="实例数" class="paramKey">实例数: {{ state.data.replicasNum }}</span>
      <a-slider class="sliderLine" v-model:value="state.data.replicasNum" :min="1" :max="8" />
    </div>
    <div class="param">
      <span class="paramKey">磁盘配置（单位为G）: {{ state.data.diskSize }}G</span>
      <a-slider class="sliderLine" v-model:value="state.data.diskSize" :min="1" :max="100" :step="1"/>
    </div>
    <a-divider style="color: #1890ff"></a-divider>
    <a-button @click="update" type="primary">确定</a-button>
  </div>
</template>



<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { moduleResourceApi } from "@/api/devcloudApi";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "resource",
  components: {},
  props: {
    moduleId: {
      type: Number,
      required: false,
    },
  },
  setup(props) {
    const { moduleId } = toRefs(props);
    const state = reactive({
      data: {
        maxMem: 256,
        minMem: 256,
      },
    });

    const update = async () => {
      if (moduleId.value) {
        if(state.data.maxMem < state.data.minMem){
          message.error("最大内存不能小于最小内存")
          return
        }
        const res = await moduleResourceApi.update(state.data);
        if (res.success && res.result) {
          message.info("保存成功")
          get()
        }
      }
    }

    const get = async () => {
      if (moduleId.value) {
        const res = await moduleResourceApi.get(moduleId.value);
        if (res.success && res.result) {
          state.data = res.result;
        }
      }
    }

    get();

    return {
      state,
      update
    }
  },
});
</script>
<style scoped lang="less">
.resource-root {
  margin: 20px 40px;
  border:1px solid #ddd;
  padding: 40px 40px;
}
.param {
  width: 100%;
  display: flex;
  align-items: center;
  line-height: 50px;
  
}
.paramKey{
  width: 23%;
  text-align: start;
}
.sliderLine {
  width: 575px;
  
}
</style>